<template>
  <div>
    <Header></Header>
    <section
      data-test="page-section"
      data-section-theme="black"
      class="page-section layout-engine-section background-width--full-bleed section-height--small content-width--medium horizontal-alignment--center vertical-alignment--middle has-background black"
      data-section-id="607bf9c9a79f9205b0d3ea7b"
      data-controller="SectionWrapperController"
      data-animation="none"
      data-controllers-bound="SectionWrapperController"
      style="padding-top: 267.656px"
      data-active="true"
    >
      <div class="section-border">
        <div class="section-background" style="top: 267.656px">
          <img
            alt=""
            data-image-dimensions="2143x1399"
            data-image-focal-point="0.5,0.5"
            data-load="false"
            elementtiming="nbf-background"
            src="../../assets/imgs/7.jpg"
            width="2143"
            height="1399"
            sizes="(max-width: 799px) 200vw, 100vw"
            style="display: block; object-position: 50% 50%"
            fetchpriority="high"
            loading="eager"
            decoding="async"
            data-loader="sqs"
          />
          <div class="section-background-overlay" style="opacity: 0.08"></div>
        </div>
      </div>
      <div class="content-wrapper" style="">
        <div class="content">
          <div
            class="sqs-layout sqs-grid-12 columns-12"
            data-type="page-section"
            id="page-section-6073ff55c64f9762a2a3667b"
          >
            <div class="row sqs-row">
              <div class="col sqs-col-12 span-12">
                <div
                  class="sqs-block html-block sqs-block-html"
                  data-block-type="2"
                >
                  <div class="sqs-block-content">
                    <div class="sqs-html-content">
                      <h2
                        style="
                          text-align: center;
                          white-space: pre-wrap;
                          transition-timing-function: ease;
                          transition-duration: 0.65s;
                          transition-delay: 0.264s;
                        "
                        class="h2-white"
                      >
                        High-precision and professional sleep monitoring
                      </h2>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section
      data-test="page-section"
      data-section-theme=""
      class="page-section layout-engine-section background-width--full-bleed section-height--small content-width--medium horizontal-alignment--center vertical-alignment--middle"
    >
      <div class="content-wrapper">
        <div class="content">
          <div class="row sqs-row">
            <div class="col sqs-col-12 span-12">
              <div class="link-box">
                <router-link class="link-1" to="/productsmenu"
                  >Full Product Menu</router-link
                >
              </div>
              <div class="img-box">
                <img
                  data-stretch="false"
                  data-src="../../assets/imgs/sleepm1.jpg"
                  data-image="../../assets/imgs/sleepm1.jpg"
                  data-image-dimensions="564x412"
                  data-image-focal-point="0.5,0.5"
                  alt="Picture 1.jpg"
                  data-load="false"
                  elementtiming="system-image-block"
                  src="../../assets/imgs/sleepm1.jpg"
                  width="564"
                  height="412"
                  sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw"
                  style="
                    display: block;
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    object-position: 50% 50%;
                  "
                  onload='this.classList.add("loaded")'
                  srcset="
                    ../../assets/imgs/sleepm1.jpg?format=100w   100w,
                    ../../assets/imgs/sleepm1.jpg?format=300w   300w,
                    ../../assets/imgs/sleepm1.jpg?format=500w   500w,
                    ../../assets/imgs/sleepm1.jpg?format=750w   750w,
                    ../../assets/imgs/sleepm1.jpg?format=1000w 1000w,
                    ../../assets/imgs/sleepm1.jpg?format=1500w 1500w,
                    ../../assets/imgs/sleepm1.jpg?format=2500w 2500w
                  "
                  loading="lazy"
                  decoding="async"
                  data-loader="sqs"
                  class="loaded"
                />
              </div>
              <div class="tip1-botm">
                <h3><strong>Sleep Monitoring Pad S-G10</strong></h3>
              </div>
              <div class="sleep-pad">
                <img
                  data-stretch="false"
                  data-src="../../assets/imgs/sleep2.png"
                  data-image="../../assets/imgs/sleep2.png"
                  data-image-dimensions="152x60"
                  data-image-focal-point="0.5,0.5"
                  alt="Picture 1.png"
                  data-load="false"
                  elementtiming="system-image-block"
                  src="../../assets/imgs/sleep2.png"
                  width="152"
                  height="60"
                  sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw"
                  style="
                    display: block;
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                    object-position: 50% 50%;
                  "
                  onload='this.classList.add("loaded")'
                  srcset="
                    ../../assets/imgs/sleep2.png?format=100w   100w,
                    ../../assets/imgs/sleep2.png?format=300w   300w,
                    ../../assets/imgs/sleep2.png?format=500w   500w,
                    ../../assets/imgs/sleep2.png?format=750w   750w,
                    ../../assets/imgs/sleep2.png?format=1000w 1000w,
                    ../../assets/imgs/sleep2.png?format=1500w 1500w,
                    ../../assets/imgs/sleep2.png?format=2500w 2500w
                  "
                  loading="lazy"
                  decoding="async"
                  data-loader="sqs"
                  class="loaded"
                />
              </div>
              <div class="tip2">
                <p>
                  The Internet of Things sleep monitoring pad S-G10 is a
                  high-precision professional product that monitors the user's
                  resting heart rate, breathing rate, sleep cycle, bed status,
                  mental stress and other key signs in real time. At the same
                  time, its precise reminder of abnormal conditions in bed
                  (tachycardia, bradycardia, tachycardia, slow breathing, apnea,
                  overtime out of monitoring, etc.) can effectively avoid
                  accidents.
                </p>
              </div>
              <div class="tip1">
                <p><strong>Product Features</strong></p>
              </div>
              <div class="tip2">
                <p>1. Real-time monitoring of HRV heart rate</p>
              </div>
              <div class="tip2">
                <p>2. HRV historical data analysis</p>
              </div>
              <div class="tip2">
                <p>3. Real-time monitoring of breathing</p>
              </div>
              <div class="tip2">
                <p>4. Respiration history data analysis</p>
              </div>
              <div class="tip2">
                <p>5. Real-time monitoring of bed status</p>
              </div>
              <div class="tip2">
                <p>
                  6. AH event: Capture the time node of the AH event through a
                  comprehensive integrated algorithm, and automatically generate
                  AH statistical reports. Analyze and record abnormal
                  situations, promptly remind, and hold up a protective umbrella
                  for the user's respiratory health.
                </p>
              </div>
              <div class="tip2">
                <p>
                  7. Sleep cycle analysis: By monitoring the sleep cycle (deep
                  sleep period, light sleep period, rapid eye movement period),
                  tracking heart rate and monitoring snoring, apnea, in-depth
                  analysis of the user's sleep quality.
                </p>
              </div>
              <div class="tip2">
                <p>
                  8. Mental stress analysis: Through various parameters in the
                  time domain such as the distribution of HR (heart rate) and
                  HRV and RR intervals, observe and analyze the user's mental
                  stress level, and calculate the mental stress index in real
                  time.
                </p>
              </div>
              <div class="application">
                <div class="left">
                  <div class="tip1 scen sqsrte-large">
                    <p><strong>Application Scenarios</strong></p>
                  </div>
                  <div class="tip1">
                    <p><strong>Product Parameter</strong></p>
                  </div>
                  <div class="tip2 circle">
                    <p>Size: 800×310mm</p>
                  </div>
                  <div class="tip2 circle">
                    <p>Normal working current: 50mA-150mA</p>
                  </div>
                  <div class="tip2 circle">
                    <p>Maximum working current: 3A</p>
                  </div>
                  <div class="tip2 circle">
                    <p>Working voltage: DC 5V</p>
                  </div>
                  <div class="tip2 circle">
                    <p>Network: China Mobile and China Unicom 4G, 3G, 2G</p>
                  </div>
                  <div class="tip2 circle">
                    <p>Support frequency band:</p>
                  </div>
                  <div class="tip2-box">
                    <div class="tip2">
                      <p>LTE-FDD: B1/B3/B8</p>
                    </div>
                    <div class="tip2">
                      <p>LTE-TDD: B38/B39/B40/B41</p>
                    </div>
                    <div class="tip2">
                      <p>WCDMA: B1/B8</p>
                    </div>
                    <div class="tip2">
                      <p>TD-SCDMA: B34/B39</p>
                    </div>
                    <div class="tip2">
                      <p>CDMA: not supported</p>
                    </div>
                    <div class="tip2">
                      <p>GSM: 900/1800MHz</p>
                    </div>
                  </div>
                  <div class="tip2 circle">
                    <p>Environment temperature: -10℃～+50℃</p>
                  </div>
                  <div class="tip2 circle">
                    <p>Atmospheric pressure: 700hPa～1060hPa</p>
                  </div>
                  <div class="tip2 circle">
                    <p>Relative humidity: ≤85% (no condensation)</p>
                  </div>
                </div>
                <div>
                  <img
                    data-stretch="false"
                    data-src="../../assets/imgs/sleepm3.png"
                    data-image="../../assets/imgs/sleepm3.png"
                    data-image-dimensions="974x2030"
                    data-image-focal-point="0.5,0.5"
                    alt="Screenshot 2021-04-13 at 23.17.05.png"
                    data-load="false"
                    elementtiming="system-image-block"
                    src="../../assets/imgs/sleepm3.png"
                    width="974"
                    height="2030"
                    sizes="(max-width: 640px) 100vw, (max-width: 767px) 100vw, 100vw"
                    style="
                      display: block;
                      object-fit: cover;
                      width: 100%;
                      height: 100%;
                      object-position: 50% 50%;
                    "
                    onload='this.classList.add("loaded")'
                    srcset="
                      ../../assets/imgs/sleepm3.png?format=100w   100w,
                      ../../assets/imgs/sleepm3.png?format=300w   300w,
                      ../../assets/imgs/sleepm3.png?format=500w   500w,
                      ../../assets/imgs/sleepm3.png?format=750w   750w,
                      ../../assets/imgs/sleepm3.png?format=1000w 1000w,
                      ../../assets/imgs/sleepm3.png?format=1500w 1500w,
                      ../../assets/imgs/sleepm3.png?format=2500w 2500w
                    "
                    loading="lazy"
                    decoding="async"
                    data-loader="sqs"
                    class="loaded"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from "../../components/header.vue";
import Footer from "../../components/footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
};
</script>
<style scoped>
@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  h1 {
    /* font-size: calc((4 - 2)* 1.2vw + 1rem); */
  }
  h2 {
    font-size: calc(1.8 * 1.2vw + 1rem);
    font-weight: 500;
  }
  .h1-1 {
    font-size: calc((4 - 1) * 1.2vw + 1rem);
  }
}
@media screen and (min-width: 768px) {
  .content {
    width: 75%;
    word-break: break-word;
  }
}
@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  h3 {
    font-size: calc(1.1 * 1.2vw + 1rem);
  }
}
.section-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.page-section.section-height--medium:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  min-height: 33vh;
}
.section-background {
  overflow: hidden;
  pointer-events: none;
}
.page-section.background-width--inset:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  padding-top: 4vw;
  padding-right: 4vw;
  padding-bottom: 4vw;
  padding-left: 4vw;
}
.section-background,
.section-background .section-background-content,
.section-background .section-background-canvas,
.section-background .section-background-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.background-width--inset:not(.content-collection):not(.gallery-section):not(
    .user-items-list-section
  )
  .section-background {
  top: 4vw;
  right: 4vw;
  bottom: 4vw;
  left: 4vw;
  /* position: absolute; */
}
.sqs-block:not(.sqs-block-html):not(.sqs-block-markdown) {
  clear: both;
}
.sqs-row::before,
.sqs-row::after {
  content: "";
  display: block;
  clear: both;
}
.sqs-block-html .sqs-block-content *:not(h1):not(h2):not(h3),
.sqs-block-html .sqs-html-content *:not(h1):not(h2):not(h3) {
  word-wrap: break-word;
}
.sqs-block {
  padding: 0 17px;
}
.tradiTip1 {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  width: 70%;
  left: 20%;
}
.section-background img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.section-background img {
  position: relative;
}
.section-border {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
h1 {
  color: #fff;
}
h1 {
  text-align: center;
  white-space: pre-wrap;
  transition-timing-function: ease;
  transition-duration: 0.65s;
  transition-delay: 0.32s;
}
.h2-1 {
  margin-top: 0;
  margin-bottom: 0;
  color: #fff;
}
.page-section.vertical-alignment--middle:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section):not(.editmode-changing-rowcount) {
  align-items: center;
}
.page-section.section-height--small:not(.content-collection):not(
    .gallery-section
  ):not(.user-items-list-section) {
  min-height: inherit;
}
.sqs-col-12 {
  width: 100%;
}
.link-box {
  padding-bottom: 17px;
}
.link-1 {
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  background-color: #000;
  font-size: 14px;
}
.img-box {
  max-width: 390px;
  margin: 0 auto;
}
.tip1-botm {
  padding-bottom: 17px;
  text-align: center;
}
.tip1 h3 {
  margin-bottom: 0;
  text-align: center;
}
.tip2 {
  /* padding-bottom: 17px; */
  word-wrap: break-word;
  color: #333;
  font-family: poppins;
  font-weight: 300;
  line-height: 30px;
  position: relative;
}
.tip3 p {
  margin: 17px 0;
  color: rgb(0, 36, 82);
}
.h3Css {
  padding-bottom: 0;
}
.h3Css h3 {
  text-align: left;
}
.application {
  display: flex;
}
.sleep-pad img {
  max-width: 152px;
  margin: 0 auto;
}
.circle p {
  padding-left: 60px;
}
.circle::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
}
.tip2-box {
  padding-left: 120px;
}
.application .left {
  width: 80%;
}
.tip2-box > div {
  position: relative;
}
.tip2-box > div::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #000;
  top: 50%;
  transform: translateY(-50%);
  left: -20px;
}
.scen {
  text-align: center;
}
@media screen and (min-width: 768px),
  screen and (max-width: calc(1511px)) and (orientation: landscape) {
  .sqsrte-large {
    font-size: calc((1.4 - 1) * 1.2vw + 1rem);
  }
}
@media screen and (max-width: 767px) {
  .application {
    display: block;
  }
}
</style>
